<template>
  <div class="search">
    <i class="iconfont icon-search"></i>
    <div class="input">
      <input
        type="text"
        :placeholder="focus ? '' : 'Search Accounts by Address or Domain'"
        @focus="focus = true"
        @blur="focus = false"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      focus: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  height: 46px;
  border-radius: 46px;
  padding: 0 20px;
  background: var(--background);

  .iconfont {
    font-size: 28px;
    color: var(--color-content);
    margin-right: 10px;
  }

  .input {
    flex: 1;

    input {
      width: 100%;
      background-color: transparent;
      border: none;
      outline: none;
      text-align: left;
      font-size: 16px;
      line-height: 16px;
      font-family: "Roboto Medium";
      color: var(--color);

      &::placeholder {
        color: var(--color-des);
      }
    }
  }
}
</style>
